<%@page import="com.mycity.jsonops.PostOps"%>
<%@page import="com.mycity.dao.UserTab"%>
<%@page import="com.mycity.dao.PostTab"%>
<%
    
    UserTab user = (UserTab) session.getAttribute("user_info");
    PostTab[] results = (PostTab[]) request.getAttribute("results");
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Recommendation for User</title>
        <meta http-equiv="cache-control" content="no-cache" />
        <!-- Main style -->
        <link rel="stylesheet" href="/MyCityWeb/css/style.css" type="text/css" />

<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_1/suggest.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_1/suggest.min.js"></script>


        <script type="text/javascript">
            function toggle_visibility(id)
            {
                var e = document.getElementById(id); // div text
                var x = (id + 1).toString();
                var img = document.getElementById(x);

                if (e.style.display == 'block') {
                    e.style.display = 'none';
                    img.src = "/MyCityWeb/img/icons/bottom.png";
                }
                else {
                    e.style.display = 'block';
                    img.src = "/MyCityWeb/img/icons/top.png";
                }
            }
        </script>
                 <script type="text/javascript">
$(function() {
  $("#tagsearch").suggest({
    key: "AIzaSyDIO2lbCrilTAPn9ZBIU1PL6n46FxnqgEw"
  }).bind("fb-select", function(e, data) {
      $("#tagsearch").val(data.name +"(" + data.notable.name + ")");
  });
});
</script>

    </head>

    <body class="direction-right">

        <!------ HEADER (BEGIN) ---------------------------->
        <div class='header'>
            
            <div class='menu' style='float: right; margin-right:10px; margin-left:1px;'>
                <% if(user!=null){ %>
                <a href="/MyCityWeb/addPost.jsp"><img src="/MyCityWeb/img/newPost.png" title='NEW POST' alt='NEW POST' /></a>
                <a href="/MyCityWeb/profilePage.jsp"><img src="/MyCityWeb/img/profile.png" title='PROFILE PAGE' alt='PROFILE PAGE' /></a>
                <% }%>
                <a href="/MyCityWeb/searchPost.jsp"><img src="/MyCityWeb/img/search.png" title='SEARCH FOR A LOCATION' alt='SEARCH FOR A LOCATION' /></a>             
                <a href="/MyCityWeb/home.jsp"><img src="/MyCityWeb/img/home.png" title='HOME PAGE' alt='HOME PAGE' /></a>
            </div>
        </div>	
        <!------- HEADER (END) -------------------------------->

        <div class='result-panel'>
            <div class='result-right'>
                <div class='divider'></div>

                <!-- //---------- QUESTION LIST ---------- -->
                <!-- QUESTION -->


                <%
                    int size =results.length;
                    if (size > 0) {
                        for (int i = 0; i < size; i++) {
                %>
                <div class='question' onclick="toggle_visibility('<%=i + 5%>');">
                    <div class='userInfoQuestion' style='left:0px; width:100%'>   
                        <div style='float:left; position:relative;'>
                            <img id='<%=i + 5%>1' style='margin-top:7px; margin-left:5px;' src="/MyCityWeb/img/icons/bottom.png" />
                        </div>
                        <span class='nameQuestion'><%=results[i].getLocName()%></span>
                        <span class='dateQuestion'><%=results[i].getPostDate()%></span>
                        <span class='dateQuestion'><a href="/MyCityWeb/Post/view/<%=results[i].getPostId()%>"> Reply </a></span>
                    </div>

                    <div class='answer' id='<%=i + 5%>' style='left:5px; width:99%; display:none;'>
                        <p class='answer'>
                            <%=results[i].getPostContent()%>
                        </p>
                    </div>

                </div>
                <%
                        }
                    }else{
                        out.print("No recommendation for now.");
                    }
                %>
                <!-- QUESTION -->

                <!-- //---------- QUESTION LIST ---------- -->

                <div class='divider'></div>
               
            </div>

            <!-------- SIDEBAR (BEGIN) --------------------->
            <div class='result-left'>
 
           
            
                <div class='divider'></div>
            
                <div class='title'><span class='title'>SEARCH FOR TAGS</span></div>
                <div>
                    <form action='/MyCityWeb/Search/byTag/' method='post'>
                        <input type='text' name='searchtag'  id="tagsearch" autocomplete="off" placeholder='Enter a tag...' />
                        <input type='submit' class='city-search' value='SEARCH' />
                    </form>
                </div>
            </div>
            <!-------- SIDEBAR (END) --------------------->

        </div>

    </body>
</html>
